import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from "mobx";
import { WeaTools, WeaLocaleProvider, WeaTop, WeaTab, WeaLeftRightLayout, WeaLeftTree, WeaFormItem, WeaSearchGroup, WeaRightMenu ,WeaErrorPage} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import { WeaTableNew,WeaSwitch } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { Button, Form } from 'antd';
import HighSeasDispenseDialog from '../dialog/HighSeasDispenseDialog';
import HighSeasLogDialog from '../dialog/HighSeasLogDialog';

@inject('highSeasDispenseListStore')
@observer
class HighSeasDispenseList extends React.Component{

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { highSeasDispenseListStore } = this.props;
        highSeasDispenseListStore.initDatas();
    }

    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
		const keyNew = nextProps.location.key;
		//点击菜单路由刷新组件
		if(keyOld !== keyNew) {
            const { highSeasDispenseListStore } = nextProps;
            highSeasDispenseListStore.initDatas();
        }
    }


    render() {
        const { highSeasDispenseListStore } = this.props;
        const { treeData,countsType,counts,showLeft, tableStore, loading, showSearchAd, searchConditionForm, searchBaseParams, rightMenu,logDialogVisible,logType } = highSeasDispenseListStore;
        return(
            <div>
                <WeaRightMenu datas={this.getRightMenus()} onClick={this.onRightMenuClick.bind(this)}>
                    <WeaTop
                            title={getLabel(386604, '客户分配')}
                            icon={<i className='icon-coms-crm' />}
                            iconBgcolor='#96358a'
                            buttons={this.getButtons()}
                            loading={loading}
                            buttonSpace={10}
                            dropMenuDatas={this.getRightMenus()}

                    >
                        <WeaLeftRightLayout
                                leftWidth={240}
                                leftCom={
                                <div style={{height:'100%'}}>
                                    <WeaLeftTree searchLabel={getLabel(387161, '全部公海')} 
                                    datas={toJS(treeData)} countsType={toJS(countsType)} 
                                    counts={toJS(counts)}  
                                    onSelect={((ids, nodeids, nodes, event)=>{
                                    highSeasDispenseListStore.resetParams();
                                    highSeasDispenseListStore.seasId = ids;
                                    highSeasDispenseListStore.doSearch();
                                    })}/>
                                    
                                </div>}
                                onCollapse={showLeft => highSeasDispenseListStore.isShowLeft(showLeft)}
                                showLeft = {showLeft}
                            >
                                <WeaTab
                                    keyParam="viewcondition"  //主键
                                    searchType={['base', 'advanced']}
                                    searchsBaseValue={(searchBaseParams&&searchBaseParams.name)||""}
                                    onSearchChange={v => highSeasDispenseListStore.setSearchKey(v)}
                                    showSearchAd={showSearchAd}
                                    buttonsAd={this.getAdButtons(highSeasDispenseListStore)}
                                    setShowSearchAd={bool => highSeasDispenseListStore.setShowSearchAd(bool)}
                                    hideSearchAd={() => highSeasDispenseListStore.setShowSearchAd(false)}
                                    searchsAd={<Form horizontal>{this.getSearchConditionForm(highSeasDispenseListStore)}</Form>}
                                    onSearch={highSeasDispenseListStore.doSearch}
                                /><WeaTable
                                    comsWeaTableStore={tableStore}
                                    hasOrder={true}
                                    needScroll={true}
                                    loading ={loading}
                                />
                            </WeaLeftRightLayout>
                    </WeaTop>
                    <HighSeasDispenseDialog contentStore={highSeasDispenseListStore} />
                </WeaRightMenu>
                {logDialogVisible&&<HighSeasLogDialog contentStore={highSeasDispenseListStore} logType={highSeasDispenseListStore.logType}/>}
            </div>    
        );

    }

    getRightMenus() {
        const {highSeasDispenseListStore} = this.props;
        const {rightMenu, tableStore,buttonDisabled} = highSeasDispenseListStore;
        let {selectedRowKeys} = tableStore;
        const isDisabled = !(selectedRowKeys.length>0 && `${toJS(selectedRowKeys)}`);
        let btnArr = [];
        rightMenu && rightMenu.map(m=>{
            btnArr.push({
                icon: <i className={m.menuIcon} />,
                content: m.menuName,
                disabled: (buttonDisabled||(isDisabled && m.isControl == "1"))
            })
        });
        return btnArr
    }

    getAdButtons(store) {
        const { doSearch, setShowSearchAd, clearAdFields } = store;
        return [
            (<Button type="primary" onClick={() => { doSearch(); setShowSearchAd(false); }}>{getLabel(197,"搜索")}</Button>),
            (<Button type="ghost" onClick={() => { clearAdFields(); }}>{getLabel(2022,"重置")}</Button>),
            (<Button type="ghost" onClick={() => { setShowSearchAd(false); }}>{getLabel(201,"取消")}</Button>)
        ];
    }

    getSearchConditionForm(store) {
        const { searchConditionComponents, searchConditionForm } = store;
        let groups = [];
        if (searchConditionComponents) {
            const { isFormInit } = searchConditionForm;
            const formParams = searchConditionForm.getFormParams();
            isFormInit && toJS(searchConditionComponents).map(c => {
                let items = [];
                c.items.map((fields, index) => {
                    items.push({
                        com: (<WeaFormItem
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            wrapperCol={{ span: `${fields.fieldcol}` }}>
                            <WeaSwitch fieldConfig={fields} form={searchConditionForm} formParams={formParams} onChange={store.searchConditionFieldChange} onEnterSearch={this.onEnterSearch}/>
                        </WeaFormItem>),
                        col: 2,
                    })
                });
                groups.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
            });
        }
        return groups;
    }

    onRightMenuClick(key) {
        const {highSeasDispenseListStore} = this.props;
        const {rightMenu, tableStore} = highSeasDispenseListStore;
        let {selectedRowKeys} = tableStore;
        rightMenu && rightMenu.length > 0 && rightMenu.map((m,i)=>{
        	if(Number(key) == i){
                let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
                if(m.type == "BTN_DISPENSE_CUSTOMER"){
                   // highSeasDispenseListStore.showCustomerModal(true,`${toJS(selectedRowKeys)}`);
                }else if(m.type == "BTN_LOG"){
                    highSeasDispenseListStore.showLog();
                }
            }
        });
    }


    getButtons() {
        const {highSeasDispenseListStore} = this.props;
        const {tableStore, rightMenu,buttonDisabled} = highSeasDispenseListStore;
        let {selectedRowKeys} = tableStore;
        let btnArr = [];
        let that = this;
        const isDisabled = !(selectedRowKeys.length>0 && `${toJS(selectedRowKeys)}`);
        rightMenu && rightMenu.length > 0 && rightMenu.map(m=>{
            m.isTop == '1' && btnArr.length < 4 && btnArr.push(
                <Button type={"primary"}
                    disabled={buttonDisabled||(isDisabled && m.isControl == "1")}
                    onClick={()=>{
                        let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
                        if(m.type == "BTN_DISPENSE_CUSTOMER"){ 
                            highSeasDispenseListStore.showCustomerModal(true,`${toJS(selectedRowKeys)}`);
                        }
                    }}>
                    {m.menuName}
                </Button>
            );
        });
        return btnArr;
    }

    onEnterSearch=()=>{
        const {highSeasDispenseListStore} = this.props;
        highSeasDispenseListStore.doSearch();
    }

}


export default WeaTools.tryCatch(React,
    props => <WeaErrorPage msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />,
    { error: "" }
)(HighSeasDispenseList);